<template>
	<view class="frame">
		<view class="suc_view">
			<view class="such_view">
				<view class="such_view_flex">
					<image src="@/static/images/such.png" mode="" class="such"></image>
					<view class="such_input_view">
						<input type="text" placeholder="名称、手机号搜索" placeholder-class="suchewei" class="sucheyi"
							v-model="such" @confirm="getsuch" />
					</view>
				</view>
			</view>
		</view>
		<view class="ciesd"></view>
		<view class="beijing">
			<view class="customer_view" v-for="(items,indexs) in giantList" :key="indexs" @click="getdetile(items.id)">
				<view class="customer_view_row">
					<view class="touxiang">
						{{getnames(items.name)}}
					</view>
					<view class="customer_view_cloum">
						<view class="customer_view_name">
							{{items.name}}
						</view>
						<view class="customer_view_phone">
							{{items.phone}}
						</view>
					</view>
				</view>
				<view class="linrsd"></view>
				<view class="shijian_flex">
					<view class="shijian_flex_timw">
						更新时间：{{items.visitTime}}
					</view>
					<view class="shijian_flex_timwname">
						{{items.consultantName}}
					</view>
				</view>
				<view class="zhuangaisd" v-if="index == 0">
					首访
				</view>
				<view class="zhuangaisd" v-if="index == 1" style="background-color:#43D2EB;">
					认筹
				</view>
				<view class="zhuangaisd" v-if="index == 2" style="background-color:#A89AD7;">
					认购
				</view>
				<view class="zhuangaisd" v-if="index == 3" style="background-color:#DC8FB1;">
					签约
				</view>
				<view class="zhuangaisd" v-if="index == 4" style="background-color:#EAAE61;">
					全款
				</view>
				<view class="zhuangaisd" v-if="index == 5" style="background-color:#947964;">
					交房
				</view>
			</view>
			<view class="lisrsimage" v-if="giantList.length < 0 || giantList.length == 0">
				<image src="https://star.googom.cn/chuangge/zanwuenirong.png" mode="widthFix"></image>
				<text>暂无客户</text>
			</view>
		</view>
		<view class="bolckss"></view>
		<liu-drag-button @clickBtn="clickBtn" :number="sukcount">按钮</liu-drag-button>
		<!-- 商品信息 -->
		<wyb-popup ref="clockPopup" type="center" :maskClickClose='true' height="372" width='622' radius="16"
			:showCloseIcon="false" bg-color="#F5F7FB">
			<view class="tanchuang_flex">
				<view class="laidian" @click="getlaidian">
					<image src="https://star.googom.cn/chuangge/laidian.png" mode="" class="laidians"></image>
					<view class="laidiandsf">
						来电
					</view>
				</view>
				<view class="laidian" style="margin-left: 32rpx;" @click="getlaifang">
					<image src="https://star.googom.cn/chuangge/laifang.png" mode="" class="laidians"></image>
					<view class="laidiandsf">
						来访
					</view>
				</view>
			</view>
		</wyb-popup>
		<!-- 登录弹窗 -->
		<login :show="shows" @loadpage="closepage" @closepage="closepage" @payment-success="refreshArray"></login>
	</view>
</template>

<script>
	import login from '@/components/login/login.vue'
	export default {
		components: {
			login
		},
		data() {
			return {
				such: '',
				shows: false,
				isgosem: false,
				pageNum:1,
				giantList:[],
				namesd:'',
				projectnameid:0
			}
		},
		onPullDownRefresh() {
			var that = this
			that.pageNum = 1
			that.getcustomerlists();
		},
		onReachBottom() {
			var that = this
			that.pageNum++
			that.getcustomerlists();
		},
		onShow() {
			var taht = this
			var token = uni.getStorageSync('token');
			taht.projectnameid = uni.getStorageSync('projectnameid');
			if (token == '' || token == null || token == undefined) {
				taht.isgosem = true
			} else {
				taht.isgosem = false
				//客户列表
				taht.getcustomerlists()
			}
		},
		methods: {
			refreshArray() {
				var taht = this
				var token = uni.getStorageSync('token');
				if (token == '' || token == null || token == undefined) {
					taht.isgosem = true
				} else {
					taht.isgosem = false
					//客户列表
					taht.getcustomerlists()
				}
			},
			//搜索
			getsuch(){
				this.giantList = []
				this.getcustomerlists()
			},
			//客户列表
			async getcustomerlists() {
				var that = this
				let data = await that.$api.getcustomerlist({
					pageNum:that.pageNum,
					pageSize:10,
					projectId:that.projectnameid,
					name:that.such
				});
				uni.stopPullDownRefresh()
				if (data.code == 200) {
					that.giantList = [...that.giantList, ...data.rows]
					const uniqueArr = [];
					const map = new Map();
					for (const item of that.giantList) {
						if (!map.has(item.id)) {
							map.set(item.id, true);
							uniqueArr.push(item);
						}
					}
					that.giantList = uniqueArr
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//点击按钮
			clickBtn() {
				let userinfo = uni.getStorageSync('token');
				if (userinfo) {
					this.$refs.clockPopup.show();
				} else {
					setTimeout(() => {
						this.shows = true
					}, 500)
				}
			},
			//解析名字
			getnames(e){
				const name = e
				const firstChar = name.charAt(0); // charAt(0) 返回字符串的第一个字符
				return firstChar;
			},
			//关闭弹窗
			closepage() {
				this.shows = false
			},
			//来电
			getlaidian() {
				uni.navigateTo({
					url: '/pages/page/customer/visit'
				})
				this.$refs.clockPopup.hide();
			},
			//来访
			getlaifang() {
				uni.navigateTo({
					url: '/pages/page/customer/Incoming'
				})
				this.$refs.clockPopup.hide();
			},
			//跳转客户详情
			getdetile(id){
				uni.navigateTo({
					url: '/pages/page/customer/customer_detil?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.frame {
		width: 100%;
		min-height: 100vh;
		background: #F5F7FB;

		.beijing {
			width: 100%;
			background: #F5F7FB;
		}

		.ciesd {
			width: 750rpx;
			height: 88rpx;
		}

		.suc_view {
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.such_view {
				width: 750rpx;
				height: 88rpx;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				align-content: center;

				.such_view_flex {
					width: 685rpx;
					height: 64rpx;
					border-radius: 324rpx;
					background: rgba(41, 87, 155, 0.05);
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					align-content: center;
					padding-left: 24rpx;

					.such {
						width: 32rpx;
						height: 32rpx;
					}

					.such_input_view {
						width: 485rpx;
						margin-left: 16rpx;
					}

					.suchewei {
						font-size: 28rpx;
						color: #7C849C;
					}

					.sucheyi {
						font-size: 28rpx;
						color: #08112C;
					}
				}
			}
		}

		.customer_view {
			width: 702rpx;
			height: 210rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 20rpx;
			margin-left: 24rpx;
			position: relative;

			.customer_view_row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				margin-top: 28rpx;
				margin-left: 24rpx;

				.touxiang {
					width: 88rpx;
					height: 88rpx;
					background: #05CF67;
					border-radius: 50%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.customer_view_cloum {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					margin-left: 28rpx;

					.customer_view_name {
						font-size: 32rpx;
						font-weight: bold;
						color: #08112C;
					}

					.customer_view_phone {
						font-size: 28rpx;
						color: #08112C;
						margin-top: 8rpx;
					}
				}
			}

			.linrsd {
				width: 702rpx;
				height: 2rpx;
				background-color: rgba(235, 238, 245, 1);
				margin-top: 28rpx;
			}

			.shijian_flex {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-left: 24rpx;
				padding-right: 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;

				.shijian_flex_timw {
					font-size: 24rpx;
					color: #08112C;
				}

				.shijian_flex_timwname {
					font-size: 24rpx;
					color: #08112C;
				}
			}

			.zhuangaisd {
				width: 96rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 2rpx 12rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				background: #79CD9E;
				position: absolute;
				top: 0;
				right: 0;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.tanchuang_flex {
		width: 622rpx;
		height: 372rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.laidian {
			width: 248rpx;
			height: 252rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.laidians {
				width: 104rpx;
				height: 104rpx;
			}

			.laidiandsf {
				font-size: 32rpx;
				font-weight: bold;
				color: #08112C;
				margin-top: 24rpx;
			}
		}
	}
	::v-deep .u-border-bottom {
		    border-bottom-width: 1rpx !important;
		    border-color: #dadbde !important;
		    border-bottom-style: none;
	}
</style>